// index.vue.hbs
<script setup lang="ts">
import VScaleScreen from 'v-scale-screen'
import { onMounted, ref } from 'vue'

const refPage = ref<HTMLDivElement | null>(null)
onMounted(() => {
  autoScale(refPage.value, {
    width: 1920,
    height: 1080,
  })
})

function autoScale(selector, options) {
  const el = selector as HTMLDivElement
  const { width, height } = options
  function init() {
    const scaleX = innerWidth / width
    const scaleY = innerHeight / height
    const scale = Math.min(scaleX, scaleY)

    const left = (window.innerWidth - width * scale) / 2
    const top = (window.innerHeight - height * scale) / 2

    console.log('scaleX:', scaleX, 'scaleY:', scaleY, 'scale:', scale, 'left:', left, 'top:', top)

    el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`
    el.style.transformOrigin = 'top left'
  }

  init()

  addEventListener('resize', init)
}
</script>

<template>
  <!-- <VScaleScreen width="1920" height="1080"> -->
  <div ref="refPage">
    <div class="w-100% h-900px bg-amber">
      111
    </div>
  </div>

  <!-- <img src="@/assets/wallhaven-e8o81r.png" alt=""> -->
  <!-- </VScaleScreen> -->
</template>

<style scoped lang="scss">
</style>
